<template>
  <div>
    <el-skeleton class="mt-10" v-if="loading" :rows="4" animated/>
    <ul v-if="!loading">
      <li v-if="articleList.length>0" v-for="(item,index) in articleList" class="article-cli" :key="index" :ref="`articleAdminArticle${index}`">
        <nuxt-link class="font-s-16 text-underline-hover"
                   :to="`/article-details/`+$base64.encode(item.id)"
                   target="_blank">
          {{ item.articleTitle }}
        </nuxt-link>
        <div class="fl-right cursor-pointer">
          <el-dropdown size="medium" trigger="click">
            <div title="更多">
              <i class="el-icon-more"></i>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="articleEdit(item.id)">编辑</el-dropdown-item>
              <el-dropdown-item @click.native="deletes(item)">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="bo-info-cl color-grey-2 flex-left">
          <div title="文章状态" class="mr-6">
            <el-tag v-if="item.auditState==1" size="mini">审核中</el-tag>
            <el-tag v-if="item.auditState==2" type="success" size="mini">已发布</el-tag>
            <el-tag v-if="item.auditState==3" type="danger" size="mini">审核未通过</el-tag>
            <el-tag v-if="item.auditState==4" type="warning" size="mini">草稿</el-tag>
          </div>
          <div title="浏览" class="mr-6">
            <svg t="1741407328107" class="icon-theme-1 icon-size-16 svg-translateY-3" viewBox="0 0 1024 1024"
                 version="1.1"
                 xmlns="http://www.w3.org/2000/svg" p-id="30371">
              <path
                d="M512 153.6c-123.477333 0-235.178667 51.9168-323.089067 137.557333C117.230933 360.96 68.266667 448.938667 68.266667 505.173333v13.6704c0 56.234667 48.981333 144.196267 120.644266 214.016C276.804267 818.466133 388.522667 870.4 512 870.4c123.613867 0 235.246933-51.234133 322.7648-135.970133 71.799467-69.5296 120.490667-157.320533 120.968533-215.296V505.173333c-0.477867-58.2656-49.169067-146.056533-120.968533-215.586133C747.246933 204.8512 635.5968 153.6 512 153.6z m0 68.266667c104.6528 0 199.799467 43.6736 275.268267 116.753066 59.886933 57.992533 99.8912 130.133333 100.1984 166.843734v13.380266c-0.3072 36.420267-40.311467 108.544-100.181334 166.536534C711.7824 758.459733 616.635733 802.133333 512 802.133333c-104.3456 0-199.560533-44.2368-275.456-118.186666C176.810667 625.7664 136.533333 553.4208 136.533333 518.843733V505.173333c0-34.577067 40.277333-106.922667 100.010667-165.12C312.439467 266.120533 407.6544 221.866667 512 221.866667z"
                p-id="30372"></path>
              <path
                d="M512 341.333333c-94.2592 0-170.666667 76.407467-170.666667 170.666667s76.407467 170.666667 170.666667 170.666667 170.666667-76.407467 170.666667-170.666667-76.407467-170.666667-170.666667-170.666667z m0 68.266667a102.4 102.4 0 1 1 0 204.8 102.4 102.4 0 0 1 0-204.8z"
                p-id="30373"></path>
            </svg>
            <span v-text="item.numberTimes==0?'--':item.numberTimes"></span>
          </div>
          <div title="点赞" class="mr-6">
            <svg t="1741407060928" class="icon-theme-1 icon-size-16 svg-translateY-3" viewBox="0 0 1024 1024"
                 version="1.1"
                 xmlns="http://www.w3.org/2000/svg" p-id="25461">
              <path
                d="M757.76 852.906667c36.906667-0.021333 72.832-30.208 79.296-66.56l51.093333-287.04c10.069333-56.469333-27.093333-100.522667-84.373333-100.096l-10.261333 0.085333a19972.266667 19972.266667 0 0 1-52.842667 0.362667 3552.853333 3552.853333 0 0 1-56.746667 0l-30.997333-0.426667 11.498667-28.8c10.24-25.642667 21.76-95.744 21.504-128.021333-0.618667-73.045333-31.36-114.858667-69.290667-114.410667-46.613333 0.554667-69.461333 23.466667-69.333333 91.136 0.213333 112.661333-102.144 226.112-225.130667 225.109333a1214.08 1214.08 0 0 0-20.629333 0l-3.52 0.042667c-0.192 0 0.64 409.109333 0.64 409.109333 0-0.085333 459.093333-0.490667 459.093333-0.490666z m-17.301333-495.914667a15332.288 15332.288 0 0 0 52.693333-0.362667l10.282667-0.085333c84.010667-0.618667 141.44 67.52 126.72 150.250667L879.061333 793.813333c-10.090667 56.661333-63.68 101.696-121.258666 101.76l-458.922667 0.384A42.666667 42.666667 0 0 1 256 853.546667l-0.853333-409.173334a42.624 42.624 0 0 1 42.346666-42.730666l3.669334-0.042667c5.909333-0.064 13.12-0.064 21.333333 0 98.176 0.789333 182.293333-92.437333 182.144-182.378667C504.469333 128.021333 546.24 86.186667 616.106667 85.333333c65.173333-0.768 111.68 62.506667 112.448 156.714667 0.256 28.48-6.848 78.826667-15.701334 115.050667 8.021333 0 17.28-0.042667 27.584-0.106667zM170.666667 448v405.333333h23.466666a21.333333 21.333333 0 0 1 0 42.666667H154.837333A26.709333 26.709333 0 0 1 128 869.333333v-437.333333c0-14.784 12.074667-26.666667 26.773333-26.666667h38.912a21.333333 21.333333 0 0 1 0 42.666667H170.666667z"
                p-id="25462"></path>
            </svg>
            <span v-text="item.likeTimes==0?'--':item.likeTimes"></span>
          </div>
          <div title="评论" class="mr-6">
            <svg t="1741407164890" class="icon-theme-1 icon-size-16 svg-translateY-3" viewBox="0 0 1024 1024"
                 version="1.1"
                 xmlns="http://www.w3.org/2000/svg" p-id="27498">
              <path
                d="M157.568 751.296c-11.008-18.688-18.218667-31.221333-21.802667-37.909333A424.885333 424.885333 0 0 1 85.333333 512C85.333333 276.362667 276.362667 85.333333 512 85.333333s426.666667 191.029333 426.666667 426.666667-191.029333 426.666667-426.666667 426.666667a424.778667 424.778667 0 0 1-219.125333-60.501334 2786.56 2786.56 0 0 0-20.053334-11.765333l-104.405333 28.48c-23.893333 6.506667-45.802667-15.413333-39.285333-39.296l28.437333-104.288z m65.301333 3.786667l-17.258666 63.306666 63.306666-17.258666a32 32 0 0 1 24.522667 3.210666 4515.84 4515.84 0 0 1 32.352 18.944A360.789333 360.789333 0 0 0 512 874.666667c200.298667 0 362.666667-162.368 362.666667-362.666667S712.298667 149.333333 512 149.333333 149.333333 311.701333 149.333333 512c0 60.586667 14.848 118.954667 42.826667 171.136 3.712 6.912 12.928 22.826667 27.370667 47.232a32 32 0 0 1 3.338666 24.714667z m145.994667-70.773334a32 32 0 1 1 40.917333-49.205333A159.189333 159.189333 0 0 0 512 672c37.888 0 73.674667-13.173333 102.186667-36.885333a32 32 0 0 1 40.917333 49.216A223.178667 223.178667 0 0 1 512 736a223.178667 223.178667 0 0 1-143.136-51.690667z"
                p-id="27499"></path>
            </svg>
            <span v-text="item.commentTimes==0?'--':item.commentTimes"></span>
          </div>
          <span class="svg-translateY-4" v-text="$utils.reckonTime(item.createTime)"
                :title="$utils.parseTime(item.createTime, '{y}-{m}-{d} {h}:{i}')"></span>
        </div>
      </li>
      <li v-if="articleList.length==0">
        <div style="text-align: center">
          <div>
            <svg t="1667825747332" class="icon" viewBox="0 0 1239 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="1560" width="50" height="50">
              <path
                d="M1215.146667 961.194667c0 35.498667-240.298667 62.805333-540.672 62.805333-297.642667 0-540.672-27.306667-540.672-62.805333 0-35.498667 240.298667-62.805333 540.672-62.805334 297.642667 0 540.672 27.306667 540.672 62.805334"
                fill="#DFDFDF" p-id="1561"></path>
              <path
                d="M95.573333 245.76l-5.461333-5.461333c2.730667-2.730667 8.192-5.461333 13.653333-10.922667l5.461334 5.461333c-5.461333 2.730667-8.192 8.192-13.653334 10.922667z m19.114667-13.653333l-2.730667-8.192c8.192-5.461333 19.114667-10.922667 27.306667-16.384l2.730667 8.192c-8.192 5.461333-19.114667 10.922667-27.306667 16.384z m906.581333 494.250666h-24.576v-8.192h32.768v8.192c-2.730667-2.730667-5.461333 0-8.192 0z m16.384-2.730666v-8.192c10.922667 0 21.845333 0 32.768-2.730667v8.192c-10.922667 2.730667-21.845333 2.730667-32.768 2.730667z m-49.152 0c-10.922667 0-21.845333-2.730667-32.768-5.461334l2.730667-8.192c10.922667 2.730667 19.114667 2.730667 32.768 5.461334l-2.730667 8.192z m-40.96-8.192c-10.922667-2.730667-21.845333-5.461333-30.037333-10.922667l2.730667-8.192c8.192 5.461333 19.114667 8.192 30.037333 10.922667l-2.730667 8.192z m-38.229333-13.653334c-10.922667-5.461333-19.114667-13.653333-27.306667-21.845333l5.461334-5.461333c5.461333 8.192 13.653333 13.653333 24.576 19.114666l-2.730667 8.192z m-30.037333-30.037333c-5.461333-8.192-10.922667-19.114667-13.653334-30.037333l8.192-2.730667c2.730667 10.922667 5.461333 19.114667 13.653334 27.306667l-8.192 5.461333z m-16.384-38.229333c0-5.461333-2.730667-13.653333-2.730667-21.845334v-13.653333h8.192v10.922667c0 5.461333 0 13.653333 2.730667 19.114666l-8.192 5.461334z m8.192-40.96h-8.192c0-10.922667 2.730667-21.845333 5.461333-32.768l8.192 2.730666c-2.730667 10.922667-2.730667 19.114667-5.461333 30.037334z m8.192-38.229334l-8.192-2.730666c2.730667-10.922667 8.192-19.114667 10.922666-30.037334l8.192 2.730667c-2.730667 10.922667-8.192 19.114667-10.922666 30.037333z m16.384-38.229333l-8.192-2.730667c5.461333-8.192 8.192-19.114667 13.653333-30.037333l8.192 2.730667c-5.461333 10.922667-10.922667 21.845333-13.653333 30.037333z m16.384-35.498667l-8.192-2.730666c5.461333-8.192 10.922667-19.114667 16.384-27.306667l8.192 5.461333c-5.461333 5.461333-10.922667 13.653333-16.384 24.576z m19.114666-35.498666l-8.192-5.461334c5.461333-8.192 10.922667-19.114667 16.384-27.306666l5.461334 5.461333c-2.730667 8.192-8.192 19.114667-13.653334 27.306667z m21.845334-32.768l-5.461334-5.461334c5.461333-8.192 10.922667-16.384 19.114667-27.306666l5.461333 5.461333c-5.461333 8.192-13.653333 16.384-19.114666 27.306667z m24.576-35.498667l-5.461334-5.461333c5.461333-8.192 13.653333-16.384 19.114667-27.306667l5.461333 5.461333c-8.192 10.922667-13.653333 19.114667-19.114666 27.306667z m21.845333-32.768l-5.461333-5.461333c5.461333-8.192 13.653333-16.384 19.114666-24.576l5.461334 5.461333c-5.461333 8.192-10.922667 16.384-19.114667 24.576z m27.306667-30.037333l-5.461334-5.461334c5.461333-8.192 13.653333-16.384 19.114667-24.576l5.461333 5.461334c-8.192 8.192-13.653333 16.384-19.114666 24.576z m24.576-32.768l-5.461334-5.461334c5.461333-8.192 13.653333-16.384 21.845334-24.576l5.461333 5.461334c-8.192 8.192-16.384 16.384-21.845333 24.576z m24.576-30.037334l-5.461334-5.461333 5.461334-5.461333c5.461333-5.461333 10.922667-13.653333 16.384-19.114667l5.461333 5.461333c-5.461333 5.461333-10.922667 10.922667-16.384 19.114667l-5.461333 5.461333z m27.306666-32.768l-5.461333-5.461333c8.192-8.192 13.653333-19.114667 19.114667-27.306667l5.461333 5.461334c-5.461333 10.922667-13.653333 19.114667-19.114667 27.306666zM150.186667 210.261333l-2.730667-8.192c8.192-2.730667 16.384-8.192 27.306667-13.653333l2.730666 8.192c-8.192 2.730667-19.114667 8.192-27.306666 13.653333zM185.685333 191.146667l-2.730666-5.461334c8.192-5.461333 19.114667-10.922667 30.037333-13.653333l2.730667 8.192c-10.922667 2.730667-19.114667 8.192-30.037334 10.922667z m939.349334-5.461334l-5.461334-5.461333c5.461333-10.922667 10.922667-19.114667 16.384-27.306667l8.192 2.730667c-5.461333 10.922667-10.922667 19.114667-19.114666 30.037333z m-901.12-10.922666L218.453333 166.570667c10.922667-2.730667 21.845333-8.192 32.768-10.922667l2.730667 8.192c-10.922667 2.730667-21.845333 5.461333-30.037333 10.922667z m35.498666-16.384l-2.730666-5.461334c10.922667-2.730667 19.114667-8.192 30.037333-10.922666l2.730667 8.192c-8.192 0-19.114667 5.461333-30.037334 8.192zM1146.88 147.456l-8.192-2.730667c2.730667-8.192 8.192-19.114667 8.192-30.037333l8.192 2.730667c-2.730667 10.922667-5.461333 21.845333-8.192 30.037333z m-849.237333-2.730667l-2.730667-8.192c10.922667-2.730667 19.114667-8.192 30.037333-10.922666l2.730667 8.192c-8.192 2.730667-19.114667 8.192-30.037333 10.922666z m38.229333-13.653333l-2.730667-8.192c10.922667-2.730667 21.845333-8.192 30.037334-10.922667l2.730666 8.192c-8.192 2.730667-19.114667 8.192-30.037333 10.922667z m38.229333-13.653333l-2.730666-8.192c10.922667-2.730667 21.845333-5.461333 30.037333-10.922667l5.461333 10.922667-32.768 8.192zM1157.802667 109.226667h-8.192v-8.192c0-8.192 0-13.653333-2.730667-21.845334l8.192-2.730666c2.730667 8.192 2.730667 16.384 2.730667 24.576V109.226667z m-742.741334-2.730667l-2.730666-8.192c10.922667-2.730667 21.845333-5.461333 30.037333-8.192l2.730667 8.192c-10.922667 0-21.845333 2.730667-30.037334 8.192z m38.229334-13.653333l-2.730667-8.192c10.922667-2.730667 21.845333-5.461333 30.037333-8.192l2.730667 8.192c-10.922667 2.730667-19.114667 5.461333-30.037333 8.192zM491.52 81.92l-2.730667-8.192 32.768-8.192 2.730667 8.192L491.52 81.92z m38.229333-8.192l-2.730666-8.192 32.768-8.192 2.730666 8.192-32.768 8.192z m614.4-2.730667c-5.461333-8.192-10.922667-16.384-19.114666-24.576l5.461333-5.461333c8.192 8.192 16.384 16.384 21.845333 27.306667l-8.192 2.730666z m-573.44-8.192l-2.730666-8.192 32.768-8.192V54.613333c-8.192 2.730667-19.114667 5.461333-30.037334 8.192z m38.229334-8.192l-2.730667-8.192 32.768-8.192 2.730667 8.192-32.768 8.192z m40.96-10.922666l-2.730667-8.192c10.922667-2.730667 21.845333-5.461333 32.768-5.461334l2.730667 8.192c-10.922667 2.730667-21.845333 5.461333-32.768 5.461334zM1119.573333 40.96c-8.192-5.461333-19.114667-10.922667-27.306666-13.653333V19.114667c10.922667 5.461333 21.845333 8.192 30.037333 16.384l-2.730667 5.461333z m-428.714666-5.461333l-2.730667-8.192c10.922667 0 21.845333-2.730667 32.768-5.461334l2.730667 8.192c-13.653333 2.730667-24.576 5.461333-32.768 5.461334z m38.229333-5.461334V21.845333c10.922667-2.730667 21.845333-2.730667 32.768-5.461333v8.192c-10.922667 2.730667-21.845333 2.730667-32.768 5.461333z m354.986667-5.461333c-10.922667-2.730667-19.114667-5.461333-30.037334-8.192l2.730667-8.192 32.768 8.192-5.461333 8.192zM770.048 24.576V16.384c10.922667-2.730667 21.845333-2.730667 32.768-5.461333v8.192c-10.922667 0-21.845333 2.730667-32.768 5.461333z m40.96-5.461333V10.922667c10.922667 0 21.845333-2.730667 32.768-2.730667v8.192c-10.922667 0-21.845333 0-32.768 2.730667z m232.106667-5.461334c-10.922667-2.730667-21.845333-2.730667-32.768-5.461333V0c10.922667 0 21.845333 2.730667 32.768 5.461333v8.192z m-193.877334 0V5.461333c10.922667 0 21.845333-2.730667 32.768-2.730666v8.192c-10.922667 0-21.845333 2.730667-32.768 2.730666z m40.96-2.730666V2.730667c10.922667 0 21.845333 0 32.768-2.730667v8.192c-10.922667 0-21.845333 0-32.768 2.730667z m114.688 0c-10.922667 0-21.845333-2.730667-32.768-2.730667V0c10.922667 0 21.845333 0 32.768 2.730667v8.192zM931.157333 8.192V0h32.768v8.192h-32.768z m150.186667 712.704v-8.192c5.461333 0 10.922667-2.730667 16.384-2.730667l2.730667 8.192c-5.461333 0-10.922667 2.730667-19.114667 2.730667z m0 0"
                fill="#D9D9D9" p-id="1562"></path>
              <path
                d="M966.656 106.496H316.757333s-49.152-5.461333-51.882666 51.882667c-2.730667 57.344 0 671.744 0 750.933333 0 65.536 90.112 79.189333 122.88 40.96 43.690667-46.421333 16.384-103.765333 5.461333-106.496-8.192-2.730667 608.938667 0 608.938667 0V180.224c-2.730667 0 5.461333-73.728-35.498667-73.728"
                fill="#FFFFFF" p-id="1563"></path>
              <path
                d="M333.141333 983.04c-24.576 0-46.421333-8.192-62.805333-24.576-13.653333-13.653333-19.114667-30.037333-19.114667-49.152v-122.88c0-204.8-2.730667-584.362667 0-630.784 2.730667-46.421333 32.768-62.805333 60.074667-62.805333h652.629333c10.922667 0 21.845333 5.461333 30.037334 13.653333 21.845333 24.576 16.384 70.997333 16.384 76.458667v674.474666H409.6c2.730667 5.461333 2.730667 8.192 5.461333 13.653334 5.461333 16.384 10.922667 54.613333-21.845333 90.112-13.653333 13.653333-35.498667 21.845333-60.074667 21.845333z m-19.114666-865.621333c-13.653333 0-38.229333 5.461333-38.229334 43.690666-2.730667 46.421333 0 425.984 0 628.053334v122.88c0 13.653333 5.461333 24.576 13.653334 35.498666 10.922667 10.922667 30.037333 19.114667 46.421333 19.114667 19.114667 0 35.498667-5.461333 43.690667-16.384 19.114667-21.845333 21.845333-43.690667 21.845333-57.344 0-16.384-8.192-30.037333-10.922667-32.768l-8.192-2.730667v-8.192c0-2.730667 0-5.461333 13.653334-8.192 16.384-2.730667 57.344-2.730667 150.186666-2.730666h445.098667v-655.36c2.730667-13.653333 2.730667-46.421333-10.922667-60.074667-2.730667-2.730667-8.192-5.461333-13.653333-5.461333H314.026667z m0 0"
                fill="#A9B1B6" p-id="1564"></path>
              <path
                d="M346.794667 229.376h570.709333v120.149333H346.794667V229.376z m0 174.762667h141.994666V436.906667h-141.994666v-32.768z m0 90.112h286.72v32.768H346.794667v-32.768z m0 90.112H518.826667v32.768h-172.032v-32.768z m0 98.304h346.794666v32.768H346.794667V682.666667z m35.498666 144.725333s60.074667 111.957333-51.882666 147.456c0 0-5.461333 0 0 0 240.298667 2.730667 480.597333 2.730667 720.896-2.730667 10.922667-2.730667 21.845333-8.192 30.037333-13.653333 5.461333-2.730667 19.114667-16.384 27.306667-35.498667 8.192-21.845333 10.922667-54.613333-10.922667-79.189333-5.461333-8.192-13.653333-13.653333-24.576-16.384H382.293333"
                fill="#EDEEEE" p-id="1565"></path>
              <path
                d="M617.130667 983.04c-95.573333 0-188.416 2.730667-283.989334 0l-16.384-2.730667 2.730667-13.653333v-2.730667h8.192c27.306667-8.192 46.421333-24.576 54.613333-43.690666 16.384-40.96-13.653333-84.650667-13.653333-84.650667l-5.461333-10.922667 712.704-5.461333h2.730666c10.922667 5.461333 19.114667 10.922667 27.306667 19.114667 21.845333 24.576 21.845333 62.805333 10.922667 87.381333-5.461333 16.384-16.384 27.306667-30.037334 38.229333-10.922667 8.192-21.845333 13.653333-32.768 16.384h-2.730666c-144.725333 2.730667-289.450667 2.730667-434.176 2.730667z m-251.221334-16.384c226.645333 2.730667 456.021333 0 682.666667-2.730667 8.192-2.730667 19.114667-8.192 27.306667-13.653333 10.922667-8.192 19.114667-19.114667 24.576-32.768 8.192-21.845333 8.192-51.882667-8.192-70.997333-5.461333-5.461333-10.922667-10.922667-19.114667-13.653334h-682.666667c8.192 19.114667 21.845333 57.344 8.192 92.842667-5.461333 16.384-16.384 30.037333-32.768 40.96z m0 0"
                fill="#A9B1B6" p-id="1566"></path>
              <path
                d="M1127.765333 688.128c-8.192-8.192-24.576-16.384-43.690666-16.384 0 0 21.845333 0 40.96-13.653333 10.922667-8.192 19.114667-24.576 19.114666-43.690667 0 0 0 27.306667 19.114667 46.421333 8.192 8.192 21.845333 13.653333 40.96 13.653334 0 0-21.845333 0-38.229333 13.653333-10.922667 8.192-19.114667 24.576-19.114667 43.690667-2.730667 0 0-24.576-19.114667-43.690667M54.613333 286.72c-10.922667-10.922667-30.037333-19.114667-54.613333-19.114667 0 0 30.037333 0 51.882667-19.114666 13.653333-10.922667 21.845333-30.037333 21.845333-57.344 0 0 0 35.498667 24.576 57.344 10.922667 10.922667 30.037333 19.114667 51.882667 19.114666 0 0-27.306667 0-49.152 19.114667-13.653333 10.922667-24.576 30.037333-24.576 57.344-2.730667-2.730667 0-35.498667-21.845334-57.344M1105.92 434.176c-5.461333-5.461333-10.922667-8.192-21.845333-8.192 0 0 10.922667 0 19.114666-8.192 5.461333-5.461333 10.922667-13.653333 10.922667-24.576 0 0 0 16.384 10.922667 24.576 5.461333 5.461333 10.922667 8.192 19.114666 8.192 0 0-10.922667 0-19.114666 8.192-5.461333 5.461333-10.922667 13.653333-10.922667 24.576 0 0 2.730667-13.653333-8.192-24.576"
                fill="#E79F9F" p-id="1567"></path>
              <path
                d="M1193.301333 595.285333c-5.461333-5.461333-13.653333-8.192-24.576-8.192 0 0 13.653333 0 24.576-8.192 5.461333-5.461333 10.922667-13.653333 10.922667-27.306666 0 0 0 16.384 10.922667 27.306666 5.461333 5.461333 13.653333 8.192 24.576 8.192 0 0-13.653333 0-24.576 8.192-5.461333 5.461333-10.922667 13.653333-10.922667 27.306667 0-2.730667 0-19.114667-10.922667-27.306667M917.504 778.24c-2.730667-2.730667-8.192-5.461333-13.653333-5.461333 0 0 8.192 0 13.653333-5.461334 2.730667-2.730667 5.461333-8.192 5.461333-16.384 0 0 0 10.922667 5.461334 16.384 2.730667 2.730667 8.192 5.461333 13.653333 5.461334 0 0-8.192 0-13.653333 5.461333-2.730667 2.730667-5.461333 8.192-5.461334 16.384 0-2.730667 2.730667-10.922667-5.461333-16.384"
                fill="#DC8484" p-id="1568"></path>
              <path
                d="M1067.690667 518.826667c0 65.536-38.229333 122.88-92.842667 147.456-21.845333 10.922667-155.648 60.074667-180.224 60.074666-27.306667 0 57.344-51.882667 35.498667-62.805333-54.613333-27.306667-90.112-84.650667-90.112-144.725333 0-90.112 73.728-163.84 163.84-163.84s163.84 73.728 163.84 163.84"
                fill="#F8E7E7" p-id="1569"></path>
              <path
                d="M794.624 740.010667c-10.922667 0-16.384-5.461333-16.384-8.192-5.461333-10.922667 5.461333-19.114667 21.845333-35.498667 5.461333-5.461333 16.384-16.384 19.114667-21.845333-57.344-30.037333-90.112-90.112-90.112-152.917334 0-98.304 79.189333-174.762667 177.493333-174.762666s174.762667 79.189333 174.762667 174.762666c0 68.266667-38.229333 131.072-101.034667 158.378667-19.114667 8.192-158.378667 60.074667-185.685333 60.074667z m109.226667-371.370667c-84.650667 0-152.917333 68.266667-152.917334 152.917333 0 57.344 32.768 109.226667 81.92 136.533334 5.461333 2.730667 8.192 8.192 10.922667 13.653333 2.730667 13.653333-10.922667 27.306667-27.306667 43.690667 43.690667-10.922667 131.072-43.690667 152.917334-54.613334 51.882667-24.576 87.381333-79.189333 87.381333-136.533333-2.730667-87.381333-68.266667-155.648-152.917333-155.648z m0 0"
                fill="#E79F9F" p-id="1570"></path>
              <path
                d="M846.506667 518.826667c0 10.922667-8.192 16.384-16.384 16.384-10.922667 0-16.384-8.192-16.384-16.384 0-10.922667 8.192-16.384 16.384-16.384s16.384 8.192 16.384 16.384"
                fill="#FCEAEA" p-id="1571"></path>
              <path
                d="M830.122667 546.133333c-10.922667 0-19.114667-5.461333-24.576-16.384-2.730667-10.922667-2.730667-21.845333 5.461333-27.306666 8.192-8.192 19.114667-10.922667 27.306667-5.461334 10.922667 2.730667 16.384 13.653333 16.384 24.576s-10.922667 24.576-24.576 24.576z m0-35.498666c-5.461333 0-8.192 5.461333-8.192 10.922666s2.730667 8.192 8.192 10.922667c5.461333 0 8.192-5.461333 8.192-10.922667 0-8.192-2.730667-10.922667-8.192-10.922666z m0 0"
                fill="#E79F9F" p-id="1572"></path>
              <path
                d="M917.504 518.826667c0 10.922667-8.192 16.384-16.384 16.384-10.922667 0-16.384-8.192-16.384-16.384 0-10.922667 8.192-16.384 16.384-16.384s16.384 8.192 16.384 16.384"
                fill="#FCEAEA" p-id="1573"></path>
              <path
                d="M898.389333 546.133333c-10.922667 0-19.114667-5.461333-24.576-16.384-2.730667-10.922667-2.730667-21.845333 5.461334-27.306666 8.192-8.192 19.114667-10.922667 27.306666-5.461334 10.922667 2.730667 16.384 13.653333 16.384 24.576 2.730667 10.922667-8.192 24.576-24.576 24.576z m0-35.498666c-2.730667 0-5.461333 2.730667-8.192 5.461333-2.730667 2.730667-2.730667 5.461333 0 10.922667 2.730667 2.730667 5.461333 5.461333 8.192 5.461333 5.461333 0 10.922667-5.461333 10.922667-10.922667 0-8.192-5.461333-10.922667-10.922667-10.922666z m0 0"
                fill="#E79F9F" p-id="1574"></path>
              <path
                d="M991.232 518.826667c0 5.461333-2.730667 10.922667-8.192 16.384-5.461333 2.730667-10.922667 2.730667-16.384 0-8.192-2.730667-10.922667-8.192-10.922667-16.384 0-10.922667 8.192-16.384 16.384-16.384s19.114667 8.192 19.114667 16.384"
                fill="#FCEAEA" p-id="1575"></path>
              <path
                d="M972.117333 546.133333c-10.922667 0-19.114667-5.461333-24.576-16.384-2.730667-10.922667-2.730667-21.845333 5.461334-27.306666 8.192-8.192 19.114667-10.922667 27.306666-5.461334 10.922667 2.730667 16.384 13.653333 16.384 24.576 2.730667 10.922667-10.922667 24.576-24.576 24.576z m0-35.498666c-2.730667 0-5.461333 2.730667-8.192 5.461333-2.730667 2.730667-2.730667 5.461333 0 10.922667 2.730667 2.730667 5.461333 5.461333 8.192 5.461333 5.461333 0 10.922667-5.461333 10.922667-10.922667 0-8.192-5.461333-10.922667-10.922667-10.922666z m0 0"
                fill="#E79F9F" p-id="1576"></path>
            </svg>
          </div>
          <span class="color-grey font-s-14">
          暂无数据
          </span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import {createAnimator} from '~/plugins/animationUtils'
export default {
  name: "articleIndex",
  props: {
    state: Number,
    keyword: String
  },
  data() {
    return {
      loading: true,
      collectionUserLoading: true,
      articleList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        articleTitle: null,
        auditState: null,
      },
      total: 0,
      scrollLoading: true,
      debounceTimer: null,//防抖
      debounceTime: 400,//防抖时间
      animator: null, // 动画器实例
    }
  },
  watch: {
    state() {
      this.getArticleInfosDebounce();
    },
    keyword() {
      this.getArticleInfosDebounce();
    },
  },
  methods: {
    articleEdit(id) {
      this.$router.push({
        path: '/article/publish-article',
        query: {id: this.$base64.encode(id)}
      })
    },
    deletes(item) {
      this.$modal.confirm('确认要删除《' + item.articleTitle + '》文章吗？').then(() => {
        this.loading = true;
        this.$API('/user/delete/article/' + item.id, "DELETE");
        return;
      }).then(() => {
        this.getArticleInfos();
        this.$modal.msgSuccess("删除成功");
      }).finally(() => this.loading = false)
    },
    getData() {
      let scrollTop = document.documentElement.scrollTop
      let clientHeight = document.documentElement.clientHeight
      let scrollHeight = document.documentElement.scrollHeight
      if (scrollHeight - (scrollTop + clientHeight) <= 1) {
        if (!this.scrollLoading) return;
        if (this.total > (this.queryParams.pageNum) * this.queryParams.pageSize) {
          this.scrollLoading = false;
          this.queryParams.pageNum = this.queryParams.pageNum + 1;
          this.$API("/user/article/list", this.$get(), this.queryParams).then(res => {
            res.data.records.forEach(item => {
              this.articleList.push(item)
            })
            this.total = res.data.total;
          }).finally(() => this.scrollLoading = true)
        }
      }
    },
    getArticleInfosDebounce() {
      clearTimeout(this.debounceTimer);
      this.debounceTimer = setTimeout(() => {
        this.getArticleInfos();
      }, this.debounceTime);
    },
    getArticleInfos() {
      this.loading = true;
      this.queryParams.pageNum = 1;
      this.queryParams.auditState = this.state;
      this.queryParams.articleTitle = this.keyword;
      this.$API("/user/article/list", this.$get(), this.queryParams).then(res => {
        this.articleList = res.data.records;
        this.total = res.data.total;
        this.loading = false;
        if (this.articleList.length == 0) {
          this.collectionUserLoading = false;
        }
        this.animator.triggerAllItemsAnimation(this.articleList, 'articleAdminArticle');
      })
    }
  },
  mounted() {
    this.animator = createAnimator(this, 'commonList')
    this.getArticleInfos();
    window.addEventListener('scroll', this.getData, true);
  },
  destroyed() {
    //离开页面时删除该监听
    window.removeEventListener('scroll', this.getData, true)
  }
}
</script>

<style>
.bo-info-cl {
  font-size: 14px;
  margin-top: 20px;
}

.bo-info-cl span {
  margin-right: 10px;
  cursor: pointer;
}

.article-cli {
  border-radius: 2px;
  padding: 10px;
  border-bottom: 1px solid #e5e6eb;
  margin-bottom: 20px;
}

.article-cli:hover {
  border-bottom: 1px solid var(--hover-color);
}

</style>
